<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<!-- 引入 ECharts 文件 -->  
<script src="echarts.min.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script>  


</head>  
  
<body>
	<%
	String name = (String)request.getAttribute("username");
	request.getSession().setAttribute("username", name);
	%>
	<div id="main" style="width:100%;height:100%;position: absolute;"></div>  
	<script type="text/javascript">  
		var myChart = echarts.init(document.getElementById('main'));  
		var url = '${pageContext.request.contextPath}/GetDataServlet';  
		$.getJSON(url).done(function(json) {  
			stuScore = json.stuScore;
			months = json.months;
			aver = json.aver;
  
			var option = {
				backgroundColor: '#0f375f',
				title : {  
					text : <%=name%>,
					textStyle:{
					    color:"#ff7f50"
					}
				},  
				tooltip: {
			        trigger: 'axis',
			        axisPointer: {
			            type: 'shadow'
			        }
			    },
				legend: {
			        data: ['個人成績', '平均成績'],
			        textStyle: {
			            color: '#ccc'
			        }
			    },
			    xAxis: {
			        data: months,
			        axisLine: {
			            lineStyle: {
			                color: '#ccc'
			            }
			        }
			    },
			    yAxis: {
			        splitLine: {show: false},
			        axisLine: {
			            lineStyle: {
			                color: '#ccc'
			            }
			        }
			    },  
				series : [{  
					name : '個人成績',  
					type : 'bar',
					barWidth: 10,
			        itemStyle: {
			            normal: {
			                barBorderRadius: 5,
			                color: new echarts.graphic.LinearGradient(
			                    0, 0, 0, 1,
			                    [
			                        {offset: 0, color: '#14c8d4'},
			                        {offset: 1, color: '#43eec6'}
			                    ]
			                )
			            }
			        },
					data : stuScore  
				}, {
					name : '平均成績',
					type : 'line',
					smooth: true,
			        showAllSymbol: true,
			        symbol: 'emptyCircle',
			        symbolSize: 15,
					data : aver
				}, {
			        name: '個人成績',
			        type: 'bar',
			        barGap: '-100%',
			        barWidth: 10,
			        itemStyle: {
			            normal: {
			                color: new echarts.graphic.LinearGradient(
			                    0, 0, 0, 1,
			                    [
			                        {offset: 0, color: 'rgba(20,200,212,0.5)'},
			                        {offset: 0.2, color: 'rgba(20,200,212,0.2)'},
			                        {offset: 1, color: 'rgba(20,200,212,0)'}
			                    ]
			                )
			            }
			        },
			        z: -12,
			        data: aver
			    }, {
			        name: 'dotted',
			        type: 'pictorialBar',
			        symbol: 'rect',
			        itemStyle: {
			            normal: {
			                color: '#0f375f'
			            }
			        },
			        symbolRepeat: true,
			        symbolSize: [12, 4],
			        symbolMargin: 1,
			        z: -10,
			        data: aver
			    }],  
				toolbox : {  
					show : true,  
					feature : {  
						mark : {  
							show : true  
						},  
						dataView : {  
							show : true,  
							readOnly : false  
						},  
						magicType : {  
							show : true,  
							type : ['line']  
						},  
						restore : {  
							show : true  
						},  
						saveAsImage : {  
							show : true  
						}  
					}  
				},  
			}  
			myChart.setOption(option);  
		})  
	</script>  
  
</body>  
  
</html>  